<template>
  <div>
    {{name1}}
    <button @click="a('mutations修改')">mutations修改store的值</button>
    <button @click="b('actions修改')">actions修改store的值</button>
    <operationTable
      ref="table"
      :fields="tableFields"
      :handle="false"
      class="m_t_30"
      width="200px"
      :fixed="true"
      :is-sort="false"
      api="backgroundList"
      :values="values"
    />
  </div>
</template>

<script>
import operationTable from '../../components/table/index'
import {mapMutations,mapState,mapActions} from 'vuex'
import {phoneNumFilter} from '../../utils/date'
export default {
  components: {
    operationTable
  },
  data() {
    return {

      tableFields: [
        {
          label: '用户名/手机号',
          prop: 'userAccount'
        },
        {
          label: '土地ID',
          prop: 'regionNo'
        },
        {
          label: '土地名称',
          prop: 'soilName'
        },
        {
          label: '作物',
          prop: 'cropName'
        },
        {
          label: '土地图片',
          prop: 'soilImgUrl'
        },
        {
          label: '播种时间',
          prop: 'plantTime'
        }
      ],
      values: {
        cropId: null,
        endTime: null,
        regionName: null,
        regionNo: null,
        startTime: null,
        time: null,
        userAccount: null
      }
    }
  },
  computed: {
    ...mapState({
      name1: (state) => state.home.name, //name1是形参，home是modules里面的文件名，name是store里面的state里面的值
    }),
  },
  watch: {},
  mounted() {
    console.log(phoneNumFilter('12345678910'));
    // this.$refs.table.init()
  },
  methods: {
    ...mapMutations({
    'changeMutations':'home/CHANGE_MUTATIONS'
    }),
     ...mapActions({
    'changeActions':'home/CHANGE_ACTIONS'
    }),
    a(val){
      this.changeMutations(val)
    },
    b(val){
      this.changeMutations(val)
    }
  }
}
</script>

<style scoped lang='scss'>
</style>
